<script lang="ts" setup>
import {ThemeSwitcher} from "~/stores/appStore";
// @ts-ignore
import local from 'element-plus/dist/locale/zh-cn.mjs';
import {ArticlePath} from "~/config/SystemConfig";
import {getArticlePublish, getBookPublish, getAllTags} from "~/server/article.service";
import {getTopTenComments} from "~/server/comment.service";
import {auth} from "~/service/auth.service";
import {userService} from "~/service/user.service";

const publishData = ref([] as any)
const publishBookData = ref([] as any)
const tagsList = ref([] as any)
const tenList = ref([] as any)

function articlePublish() {
    getArticlePublish().then(({data}: any) => {
        publishData.value = data.data
    })
}

function bookPublish() {
    getBookPublish().then(({data}: any) => {
        publishBookData.value = data.data
    })
}

function allTags() {
    getAllTags().then(({data}: any) => {
        tagsList.value = data.data
    })
}

function tenCommentList() {
    getTopTenComments().then(({data}: any) => {
        tenList.value = data.data
    })
}

const userStore = useUserStore()
const userInfo = computed(() => {
    return userStore.userInfo
})
const openLoginDialog = () => {
    auth.login()
}

function loginOut() {
    userService.loginOut()
}

const toggleActive = () => {
    const userBtn: any = document.querySelector('.user-btn')
    const widgetArea: any = document.querySelector('.widget-area')
    const guestArea: any = document.querySelector('.guest-area')
    const menuAreaContent: any = document.querySelector('.menu-area-content')
    userBtn.classList.toggle('active');
    widgetArea.classList.toggle('active');
    guestArea.classList.toggle('active');
    menuAreaContent.scrollTop = 0
}

function toggleTheme() {
    ThemeSwitcher.toggleTheme()
}
const appStore = useAppStore()
let websiteConfig = computed(() => {
  return appStore.websiteConfig
})
onMounted(() => {
    articlePublish()
    bookPublish()
    allTags()
    tenCommentList()
})
</script>

<template>
    <div class="dialog-area menu-widgets is-widget">
      <div class="menu-widgets-header">
        <div class="icon-area site-icon">
          <a role="button" class="iconfont icon-pinglun-fill user-btn" title="互动列表"
             style="animation-delay: 0s;" @click="toggleActive"></a>
          <a role="button" id="theme-toggle" class="iconfont icon-night" title="切换夜间模式" @click="toggleTheme"
             style="animation-delay: 0.1s;"></a>
        </div>
        <form role="search" class="search-form">
          <label>
            <span class="screen-reader-text">Search for:</span>
            <input type="search" class="search-field" placeholder="输入关键字搜索 …" value="" name="s"
                   title="Search for:">
          </label>
          <input type="submit" class="button has-thyuu-color submit" value="GO">
        </form>
      </div>
        <div class="side-circle"></div>
        <label for="toggle-hidden" class="toggle-btn is-sidebar" role="button" title="查看">
          <a role="button" href="javascript:" class="welcome-tip" target="_blank" title="登录">
            😉		<em class="name" v-if="userInfo == ''" @click="openLoginDialog">欢迎来到{{ websiteConfig.name }}，为您导读动态</em>
            <em class="name" v-else>欢迎登录：{{ userInfo.nickname }} !</em>
          </a>
        </label>
        <div class="menu-area-content">
            <div class="user-sub widget-area active" role="complementary">
                <aside class="widget widget_block widget_calendar">
                    <ElConfigProvider :locale='local'>
                        <ElCalendar></ElCalendar>
                    </ElConfigProvider>
                </aside>
                <aside class="widget widget_block widget_recent_entries">
                    <ul class="has-dates wp-block-latest-posts">
                        <template v-for='item in publishData'>
                            <li>
                                <a class="wp-block-latest-posts__post-title"
                                   :href='ArticlePath.Path+item.id'>{{ item.articleTitle }}</a>
                                <time :datetime='item.createTime' class="wp-block-latest-posts__post-date">
                                    {{ item.createTime }}
                                </time>
                            </li>
                        </template>
                    </ul>
                </aside>
                <aside class="widget widget_block widget_rss">
                    <ul class="has-dates has-excerpts douban wp-block-rss">
                        <template v-for='book in publishBookData'>
                            <li class="wp-block-rss__item">
                                <div class="wp-block-rss__item-title">
                                    <a :href='book.bookUrl'>{{ book.bookName }}</a>
                                </div>
                                <time :datetime='book.createTime' class="item-publish-date">{{ book.createTime }}</time>
                                <div class='block-rss__item-excerpt'>推荐指数: {{ book.bookRate }}</div>
                            </li>
                        </template>
                    </ul>
                </aside>
                <aside class="widget widget_block widget_tag_cloud">
                    <p class="is-style-outline block-tag-cloud">
                        <template v-for="tag in tagsList" :key="tag.id">
                            <a :class="'tag-cloud-link tag-link-'+tag.id">{{ tag.tagName }}</a>
                        </template>
                    </p>
                </aside>
            </div>
            <!-- #secondary -->
            <div class="user-sub guest-area">
                <div class="widget comment-area">
                    <h6>最近评论</h6>
                    <ul>
                        <template v-for="c in tenList" :key="c.id">
                            <li>
                                <time>{{ timeFormat(String(c.createTime)) }}</time>
                                <a class="content">{{ c.commentContent }}</a>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
:root {
  --custom-main-hue: 359deg;
  --custom-main-sat: 83%;
  --custom-main-lig: 62%;
  --custom-subs-hue: 17deg;
  --custom-subs-sat: 95%;
  --custom-subs-lig: 70%;
}
.search-form .submit {
  position: absolute;
  right: .25em;
}
.el-calendar__header{
  padding: 0 15px;
  border-bottom: none;
}
.el-calendar__body{
  padding: 0;
}
</style>
